<template>
  <!--  <van-dialog class-name="goodsPromoDialog" v-model:show="show" :show-confirm-button="false">-->
  <!--    <div-->
  <!--      class="container relative bg-gradient-to-r from-indigo-500 to-violet-500 text-white p-8 rounded-lg shadow-lg max-w-md mx-auto">-->
  <!--      <canvas id="myCanvas" class="absolute inset-0 w-full h-full"></canvas>-->
  <!--      <div class="text-3xl font-bold mb-4">{{ $mt('Special Offer!') }}</div>-->
  <!--      <div class="text-lg mb-4">-->
  <!--        {{ $mt('Get') }}-->
  <!--        <span class="text-yellow-400 font-bold">10% OFF</span>-->
  <!--        {{ $mt('your next purchase!') }}-->
  <!--      </div>-->
  <!--      <div class="text-base mb-4">{{ $mt('Use coupon code') }}:</div>-->
  <!--      <div class="bg-white text-gray-800 rounded-lg px-4 py-2 flex items-center justify-between">-->
  <!--        <span class="text-2xl font-semibold">BitTopup</span>-->
  <!--        <button-->
  <!--          @click="copyHandle"-->
  <!--          class="bg-blue-800 z-2 relative text-white px-3 py-1 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">-->
  <!--          Copy-->
  <!--        </button>-->
  <!--      </div>-->
  <!--      <div class="text-sm mt-4">-->
  <!--        <p>-->
  <!--          {{ $mt('Valid until') }}-->
  <!--          <span class="font-semibold">{{ $mt('January 31, 2024') }}</span>-->
  <!--        </p>-->
  <!--        <p>{{ $mt('Terms and conditions apply.') }}</p>-->
  <!--      </div>-->
  <!--      <van-icon name="close" @click="show = false" class="close-icon" />-->
  <!--    </div>-->
  <!--  </van-dialog>-->
</template>
<script setup lang="ts">
// import { useClipboard } from '@vueuse/core'
// import { ConfettiEjector, CanvasRender, CustomShape } from 'confetti-ts-canvas'
// const showPromoTimes = useLocalStorage('showPromoTimes', 0)
// const show = ref(false)
// const fireRibbon = () => {
//   const g = (document.getElementById('myCanvas') as HTMLCanvasElement).getContext('2d')
//   const canvasRender = new CanvasRender()
//   canvasRender.init(
//     //必填 CanvasContext
//     g,
//     //可选填入
//     {
//       width: g.canvas.width,
//       height: g.canvas.height,
//     },
//     //以下参数全部可选填入
//     {
//       displayFps: false,
//       grivaty: 0.5,
//     },
//   )
//   const pao = new ConfettiEjector(canvasRender, {
//     limitAngle: [225, 315], //喷发角度区间[-∞,+∞]
//     count: 120, //喷发纸片数量
//   })
//   const boom = pao.create({
//     x: Math.random() * (g.canvas.width * -0.1),
//     y: Math.random() * (g.canvas.height * 0.5), //喷发位置
//     clampforce: [20, 60], //喷发力度
//     radius: 8, //纸片大小
//   })
//   pao.fire(boom)
// }
// onMounted(() => {
//   if (!(showPromoTimes.value % 6)) {
//     show.value = true
//     setTimeout(fireRibbon, 100)
//   }
//   showPromoTimes.value++
// })
// const { text, copy, copied, isSupported } = useClipboard()
// const copyHandle = () => {
//   copy('BitTopup')
//   showSuccessToast('Copied')
//   show.value = false
// }
</script>
<style lang="scss">
.goodsPromoDialog {
  overflow: visible;
  --van-padding-md: 0px;
  --van-dialog-width: 345px;

  .close-icon {
    position: absolute;
    left: 50%;
    font-size: 40px;
    transform: translateX(-50%);
    bottom: -55px;
  }
}
</style>
